<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <shopro-navbar :isBack="false">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;font-size:30rpx;z-index: 10000"
                @click="userInfo.password?'':denglu()"
            >
                {{ '校级智慧体测数据平台' }}
            </text>
        </shopro-navbar>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-40s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">学校人数占比</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;height: 320rpx;">

                    <view class="lenged u-flex u-flex-col">
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class="u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    {{ homeData.man_num }}
                                </view>
                                <view class="u-flex u-row-between timu">男生人数</view>
                            </view>
                        </view>
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class=" u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    {{ homeData.woman_num }}
                                </view>
                                <view class="u-flex timu u-row-between">女生人数</view>
                            </view>
                        </view>
                    </view>
                    <view class="chart-content" style="width: 80%;height: 300rpx;position:absolute;right: 0">
                        <qiun-data-charts
                            type="pie"
                            :opts="nannvPieoptions"
                            :chartData="chartPieData"
                        />
                    </view>
                </view>
            </view>
            <!--            全校体测结果-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 yuangong-item u-col-top">
                <view class="u-flex u-col-center u-row-left u-w-40s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">全校体测结果</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view class="u-flex u-w-100s u-row-between top-yuangong u-p-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center u-flex-1">
                        <view class="topnum">{{ homeData.canyu_num }}</view>
                        <view class="topname">参与人数</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center u-flex-1">
                        <view class="topnum">{{ homeData.canyu_rate }}</view>
                        <view class="topname">参与率</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center u-flex-1">
                        <view class="topnum">{{ homeData.avg_num }}</view>
                        <view class="topname">平均分</view>
                    </view>
                </view>
                <view class="u-flex u-w-100s u-row-between top-yuangong u-p-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center u-flex-1">
                        <view class="topnum">{{ homeData.hege_num }}</view>
                        <view class="topname">合格人数</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center u-flex-1">
                        <view class="topnum">{{ homeData.hege_rate }}</view>
                        <view class="topname">合格率</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center u-flex-1">
                        <view class="topnum">{{ homeData.max_avg }}</view>
                        <view class="topname">最高分</view>
                    </view>
                </view>
            </view>
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-40s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">院系合格占比</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 660rpx">
                        <qiun-data-charts
                            type="column"
                            :opts="hegulvChartOption"
                            :chartData="hegelvChartData"
                            :ontouch="true"
                        />
                    </view>
                </view>
            </view>
            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-60s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">男生各项目平均分与等级</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 660rpx">
                        <qiun-data-charts
                            type="mix"
                            :opts="manClassScoreData"
                            :chartData="manClassScoreChartData"
                            :ontouch="true"
                        />
                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-60s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">女生各项目平均分与等级</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 660rpx">
                        <qiun-data-charts
                            type="mix"
                            :opts="womanClassScoreData"
                            :chartData="womanClassScoreChartData"
                            :ontouch="true"
                        />
                    </view>
                </view>
            </view>
            <u-calendar v-model="showriqi" :mode="mode" @change="changeDate"></u-calendar>
        </view>
    </view>
</template>

<script>

import {mapGetters} from 'vuex';
let chart = null
export default {
    data() {
        return {
            chartData: {},
            day     : "12",
            month   : "六月",
            ec      : {
                lazyLoad: true
            },
            showriqi: false,
            mode    : 'date',
            homeData: {},

            //     常规饼图

            //    院系合格占比
            labelOption: {
                show     : true,
                position : 'inside',
                formatter: '{c}%',
                color    : '#fff',
                rotate   : 90
            },
            hegelvDataX: [],
            hegelvData : [],
            //     男生各项占比
            man_levelProjectData  : [],
            man_levelProjectX     : [],
            woman_levelProjectData: [],
            woman_levelProjectX   : [],
            //     女生各项占比
            manClassScoreChartData  : {},
            hegelvChartData         : {},
            womanClassScoreChartData: {},
            chartPieData:{}
        };
    },
    computed: {
        ...mapGetters(['isLogin', 'userInfo']),
        hegulvChartOption() {
            return {
                color       : ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding     : [15, 15, 0, 10],
                enableScroll: true,
                legend : {
                    type: 'scroll',
                    fontSize   : 10
                },
                xAxis       : {
                    disableGrid: true,
                    scrollShow : true,
                    itemCount  : 5,
                    rotateLabel: true,
                    rotateAngle: 25,
                    marginTop  : 6,
                    fontSize   : 12
                },
                yAxis       : {
                    fontSize   : 12,
                    disabled   : false,
                    disableGrid: false,
                    splitNumber: 5,
                    gridType   : "dash",
                    dashLength : 4,
                    gridColor  : "#CCCCCC",
                    padding    : 10,
                    showTitle  : true,
                    data       : [
                        {
                            min: 0,
                            position : "left",
                            title    : "比率 单位:%",
                            textAlign: "left",
                            format: '%',
                            titleOffsetX:20
                        },
                    ]
                },
                extra       : {
                    column: {
                        type           : "stack",
                        width          : 30,
                        activeBgColor  : "#fff",
                        activeBgOpacity: 0.08,
                        labelPosition  : "center"
                    }
                }
            }
        },
        //  男生各项目平均分与等级
        manClassScoreData() {
             return {
                color       : ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding     : [15, 15, 0, 15],
                enableScroll: true,
                legend      : {
                    data: ['分数', '合格率', '优良率'],
                    fontSize   : 10
                },
                xAxis       : {
                    disableGrid: true,
                    scrollShow : true,
                    itemCount  : 5,
                    rotateLabel: true,
                    rotateAngle: 25,
                    marginTop  : 6,
                    fontSize   : 12
                },
                yAxis       : {
                    fontSize   : 12,
                    disabled   : false,
                    disableGrid: false,
                    splitNumber: 5,
                    gridType   : "dash",
                    dashLength : 4,
                    gridColor  : "#CCCCCC",
                    padding    : 10,
                    showTitle  : true,
                    data       : [
                        {
                            position : "left",
                            title    : "分数 单位:分",
                            format: '分',
                        },
                        {
                            position : "right",
                            min      : 0,
                            max      : 100,
                            title    : "比率 单位:%",
                            textAlign: "left",
                            format: '%',
                        },

                    ]
                },
                extra       : {
                    mix: {
                        column: {
                            width: 20
                        }
                    }
                }
            }
        },
        //   女生各项目平均分与等级
        womanClassScoreData() {
            return {
                color       : ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding     : [15, 15, 0, 15],
                enableScroll: true,
                legend      : {
                    data: ['分数', '合格率', '优良率'],
                    fontSize:10
                },
                xAxis       : {
                    disableGrid: true,
                    scrollShow : true,
                    itemCount  : 5,
                    rotateLabel: true,
                    rotateAngle: 25,
                    marginTop  : 6,
                    fontSize   : 12
                },
                yAxis       : {
                    disabled   : false,
                    disableGrid: false,
                    splitNumber: 5,
                    gridType   : "dash",
                    dashLength : 4,
                    gridColor  : "#CCCCCC",
                    padding    : 10,
                    showTitle  : true,
                    fontSize   : 12,
                    data       : [
                        {
                            position : "left",
                            title    : "分数 单位:分",
                            format: '分',
                        },
                        {
                            position : "right",
                            min      : 0,
                            max      : 100,
                            title    : "比率 单位:%",
                            textAlign: "left",
                            format: '%',
                        },

                    ]
                },
                extra       : {
                    mix: {
                        column: {
                            width: 20
                        }
                    }
                }
            }
        },
        // 饼图
        nannvPieoptions() {
            return {
                color       : ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding     : [5, 5, 5, 5],
                enableScroll: false,
                extra       : {
                    pie: {
                        activeOpacity: 0.5,
                        activeRadius : 15,
                        offsetAngle  : 0,
                        labelWidth   : 15,
                        border       : false,
                        borderWidth  : 3,
                        borderColor  : "#FFFFFF",
                        customRadius:28
                    }
                }
            }
        }
    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad(options) {
        var that = this;
        that.init()
        console.log("==this.homeData",that.homeData)
        if (that.$Route.query.id) {
            uni.setStorageSync('fid', that.$Route.query.id);
        }
    },
    onReady() {
    },
    methods: {
        // 初始化
        init() {
            this.initdata()
        },
        changeDate(e) {
            this.day = e.day
            this.getmonth(e.month)
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        initdata() {
            let that = this;
            that.$http(
                    "login.userDataCenter",
                    {},
                    "加载中..."
                )
                .then(res => {
                    that.homeData               = res.data;
                    console.log("=====res.data",res.data)
                    that.processingData();
                    that.manchartData();
                    that.womanchartData();
                    that.piechartdata();
                });
        },
        processingData() {
            var that = this;
            that.homeData.hegelv.series.map(item => {
                item.label     = that.labelOption;
                item.textColor = "#FFFFFF";
                let data       = [];
                item.data.map(items => {
                    data.push(Number(items.slice(0, items.length - 1)));
                })
                item.data = data;
                item.format = "baifenhao"
            })
            that.hegelvDataX = that.homeData.hegelv.data
            that.hegelvData  = that.homeData.hegelv.series
            console.log("===that.hegelvData",that.hegelvData)
            //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
            let res          = {
                categories: that.hegelvDataX,
                series    : that.hegelvData
            };
            that.hegelvChartData = JSON.parse(JSON.stringify(res));
            console.log('=====that.hegelvChartData', that.hegelvChartData)
        },
        manchartData() {
            let that                    = this;
            that.man_levelProjectData   = [
                {
                    name: "分数",
                    type    : 'column',
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' 分';
                        }
                    },
                    barWidth: 20,
                    data: that.homeData.man_level.data[0]
                },
                {
                    name: "合格率",
                    barWidth: 20,
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' %';
                        }
                    },
                    type         : "line",
                    data: that.homeData.man_level.data[1]
                },
                {
                    name: "优良率",
                    barWidth: 20,
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' %';
                        }
                    },
                    type         : "line",
                    data: that.homeData.man_level.data[2]
                }
            ];
            that.man_levelProjectX      = that.homeData.man_level.project;
            let res                     = {
                categories: that.man_levelProjectX,
                series    : that.man_levelProjectData
            };
            that.manClassScoreChartData = JSON.parse(JSON.stringify(res));
        },
        womanchartData() {
            let that                    = this;
            that.woman_levelProjectData   = [
                {
                    name: "分数",
                    type    : 'column',
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' 分';
                        }
                    },
                    barWidth: 20,
                    data: that.homeData.woman_level.data[0]
                },
                {
                    name: "合格率",
                    barWidth: 20,
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' %';
                        }
                    },
                    type         : "line",
                    data: that.homeData.woman_level.data[1]
                },
                {
                    name: "优良率",
                    barWidth: 20,
                    tooltip : {
                        valueFormatter: function (value) {
                            return value + ' %';
                        }
                    },
                    type         : "line",
                    data: that.homeData.woman_level.data[2]
                }
            ];
            that.woman_levelProjectX    = that.homeData.woman_level.project;
            let res                     = {
                categories: that.woman_levelProjectX,
                series    : that.woman_levelProjectData
            };
            that.womanClassScoreChartData = JSON.parse(JSON.stringify(res));
        },
        piechartdata(){
            var that = this;
            let res = {
                series: [
                    {
                        data: [{"name":"男","value":(that.homeData.man_num == 0 && that.homeData.woman_num == 0) ? 0 : that.homeData.man_num / (that.homeData.man_num + that.homeData.woman_num)},
                            {"name":"女","value":(that.homeData.man_num == 0 && that.homeData.woman_num == 0) ? 0 : that.homeData.woman_num / (that.homeData.man_num + that.homeData.woman_num)}]
                    }
                ]
            };
            that.chartPieData = JSON.parse(JSON.stringify(res));
        },
        // 路由跳转
        jump(path, parmas) {
            console.log("====1111", path)
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.uni-ec-canvas {
    width: 100%;
    height: 400rpx;
    display: block;
}

.uni-ec-canvas-bing {
    width: 100%;
    height: 200rpx;
    display: block;
}

.uni-ec-canvas-hegelv {
    width: 100%;
    height: 400rpx;
    display: block;
}

.home-wrap {
    background: #F5F5F5 !important;
}

.yuangong-item {
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
    border-radius: 20rpx;

    .topnum {
        font-size: 30rpx;
        margin-bottom: 10rpx;
    }

    .topname {
        font-size: 24rpx;
        color: #999999;
    }
}

.baobiao-item {
    background: #fff;
    border-radius: 30rpx;
    padding: 20rpx;

    .time-day {
        width: 100rpx;
        background: #2A6CFF;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}

.lenged {
    position: absolute;
    top: 16rpx;
    left: -22rpx;
    width: 26vw;
    padding: 10rpx 18rpx;

    .wancheng {
        width: 100%;

        .timu {
            color: #999;
        }
    }
}

::v-deep .u-drawer {
    z-index: 1110000 !important;
}

.u-h-100 {
    background: #3FA897;
    color: #fff;
    position: relative;
    margin-left: -42rpx;
    .biaoshi {
        position: absolute;
        left: 0;
        bottom: -24rpx;
        width: 0px;
        height: 0px;
        border-top: 14rpx solid #067664;
        border-right: 14rpx solid #067664;
        border-bottom: 14rpx solid transparent;
        border-left: 14rpx solid transparent;
    }

    .right-arrow {
        position: absolute;
        right: 0;
        bottom: 0rpx;
        width: 0px;
        height: 0px;
        border-top: 40rpx solid #3FA897;
        border-right: 40rpx solid #fff;
        border-bottom: 40rpx solid #3FA897;
        border-left: 40rpx solid #3FA897;
    }
}
</style>
